<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
   	<style>
      html, body, #map_canvas {                
        height: 100%;
      }
    </style>
<title>Geolocalizar a un usuario en Google Maps</title>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>


	

	var map;
	
	function drawMap(position){
		
		var myLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		
		var mapOptions = {
		          zoom: 15,
		          center: myLatLng,
		          mapTypeId: google.maps.MapTypeId.ROADMAP
		        };
					
		map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
		
		
		var marker = new google.maps.Marker({
		      position: myLatLng,
		      map: map,
		      title:"Tu ubicación"
		  });
		
		
		
	}
	
	
	function initialize(){  

		
		var x=document.getElementById("demo");

		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(drawMap);
		} else {
			x.innerHTML="Geolocation is not supported by this browser.";
		}					
	
	}

		google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>

<h1>Geolocalizar a un usuario en Google Maps</h1>
<div id="map_canvas" style="width: 50%; height: 50%"></div>
<span id="demo"></span>

<br/><br/>
<hr>
Art&iacute;culo disponible en: <a href="http://lineadecodigo.com/html5/geolocalizando-un-usuario-con-html5-en-google-maps/">http://lineadecodigo.com/html5/geolocalizando-un-usuario-con-html5-en-google-maps/</a><br/>
<a href="http://lineadecodigo.com" title="Linea de Codigo">lineadecodigo.com</a>


</body>
</html>